<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>元素背景</title>
        <style type="text/css">
            .first {
                width: 800px;
                height: 500px;
                padding: 25px;
                border: 20px dotted brown;
                margin: 25px auto;
                font-size: 400px;
                line-height: 1em;
                color: rgba(100,100,100, 0.5);
                /* 背景颜色默认从 边框边缘(border edge) 开始*/
                background-color: #dfdfdf;
                background-image: url("zhibudao.webp");
                background-repeat: no-repeat;
                background-position: center;
                background-size: 20rem;
                background-attachment: scroll;
            }

            .second {
                width: 800px;
                height: 500px;
                padding: 25px;
                border: 20px dotted brown;
                margin: 25px auto;
                font-size: 700px;
                line-height: 800px;
                background: #dfdfdf url("zhibudao.webp") center/100% no-repeat  local;
                overflow: auto;
            }

            .third {
                width: 800px;
                height: 500px;
                padding: 25px;
                border: 20px dotted brown;
                margin: 25px auto;
                background-color: #dfdfdf;
                background-image: url("buxiaode.webp");
                background-repeat: no-repeat;
                background-size: contain;
                background-origin: content-box;
            }

            .fourth {
                width: 800px;
                height: 500px;
                padding: 25px;
                border: 20px dotted brown;
                margin: 25px auto;
                background-color: #dfdfdf;
                background-image: url("buxiaode.webp");
                background-repeat: no-repeat;
                background-size: cover;
                background-origin: border-box;
                background-clip: padding-box;
            }
        </style>
    </head>
    <body>

        <div class="first">
            小芳
        </div>

        <div class="second">
            小俊
        </div>

        <div class="third">
            小娜
        </div>

        <div class="fourth">
            小数组
        </div>

    </body>
</html>